import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Form, Input, Field, Button } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import './index.scss';
import intl from '../../../../../../../../../../locale';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    span: 14,
  },
};

export default class DeleteModal extends React.Component {
  static propTypes = {
    trigger: PropTypes.element,
    successCallback: PropTypes.func,
    title: PropTypes.string,
    question: PropTypes.string,
    warnTip: PropTypes.string,
    okTxt: PropTypes.string,
  };

  static defaultProps = {
    trigger: null,
    successCallback: () => {},
    title: '',
    question: '',
    warnTip: '',
    okTxt: '',
  };

  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.state = {
      isModalOpen: false,
      submitting: false,
    };
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.setState({
      isModalOpen: false,
    });
  };

  handleCallback = (params) => {
    this.setState({
      ...params,
    });
  };

  handleOk = () => {
    if (this.state.submitting) {
      return;
    }
    this.field.validate((errors) => {
      if (!errors) {
        this.props.successCallback(this.handleCallback);
      }
    });
  };

  render() {
    const { init } = this.field;
    const { title, question, warnTip, okTxt } = this.props;

    return (
      <React.Fragment>
        {this.state.isModalOpen ? (
          <Dialog
            title={
              <div className="setting-modal-title">
                <YunxiaoIcon
                  type="warning-fill"
                  style={{ color: '#FFA003', marginRight: '10px' }}
                />
                {title}
              </div>
            }
            visible
            style={{ width: '460px' }}
            onOk={this.handleOk}
            onCancel={this.onClose}
            onClose={this.onClose}
            footer={
              <Button
                loading={this.state.submitting}
                style={{ width: '100%' }}
                type="primary"
                warning
                onClick={this.handleOk}
              >
                {okTxt}
              </Button>
            }
          >
            <div className="setting-modal-wrapper">
              <div className="question">{question}</div>
              <div className="tip">{warnTip}</div>
              <div className="password-label">
                <div className="password-label-left">
                  <span className="star">*</span>
                  {intl.get({
                    id: 'code-assets.containers.transferModal.PasswordVerification',
                    defaultMessage: '密码验证',
                  })}
                </div>
                <div className="password-label-right">
                  {intl.get({
                    id: 'code-assets.containers.transferModal.ForgotPassword',
                    defaultMessage: '忘记密码',
                  })}
                </div>
              </div>
              <Form {...formItemLayout} field={this.field} labelAlign="top">
                <FormItem label="">
                  <Input
                    placeholder={intl.get({
                      id: 'code-assets.containers.transferModal.EnterAPassword',
                      defaultMessage: '请输入密码',
                    })}
                    {...init('path', {
                      rules: [
                        {
                          required: true,
                          message: intl.get({
                            id: 'code-assets.src.utils.locale.ThisParameterIsRequired',
                            defaultMessage: '该项为必填项',
                          }),
                        },
                      ],
                    })}
                  />
                </FormItem>
              </Form>
            </div>
          </Dialog>
        ) : null}
        {!!this.props.trigger &&
          React.cloneElement(this.props.trigger, { onClick: this.showModal })}
      </React.Fragment>
    );
  }
}
